<template>
  <div class="page-aside">
    <div class="aside-item">
      <input
        v-model="value"
        @change="search"
        placeholder="输入文章名字搜索"
        type="text"
        class="search-input"
      >
    </div>
    <div class="aside-item">
      <h4 class="title">标签</h4>
      <div class="cloud-container" ref="cloud"></div>
      <!-- <div class="tag-list" v-show="false">
        <nuxt-link
          class="tag"
          :to="{name: 'index', query: {tagId: item.id}}"
          v-for="(item, i) in tags"
          :key="i"
        >{{ item.name }}</nuxt-link>
      </div>-->
    </div>
    <div class="aside-item">
      <h4 class="title">学习娱乐</h4>
      <ul class="list-group">
        <li class="list-group-item" v-for="(item, i) in funny" :key="i">
          <a :href="item.href">{{ item.name }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tags: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      value: this.$route.query.search || "",
      funny: [
        { name: '我的每日英语', href: 'https://www.luzhongkuan.cn/web/collect/#/english' },
        { name: '我喜欢的颜色', href: 'https://www.luzhongkuan.cn/web/collect/#color' },
        { name: "临时图床", href: "http://m.luzhongkuan.cn/upload" },
        { name: "个人插件中心", href: "http://lib.luzhongkuan.cn" },
        { name: "animate.css", href: "https://www.luzhongkuan.cn/web/demo/#/animate.css" },
        { name: "kuan-css", href: "https://www.kuan1.top/kuan-css/" },
        { name: "小学生数学试-，-", href: "http://exam.luzhongkuan.cn" },
        { name: "脑筋急转弯", href: "https://www.luzhongkuan.cn/web/kuan/#/life/brain" }
        // { name: "英汉字典【简陋版】", href: "https://luzhongkuan.cn/web/dict" },
        // { name: "数据统计", href: "https://www.luzhongkuan.cn/web/statistics/" },
      ]
    };
  },
  methods: {
    async search(e) {
      const { value } = e.target;
      const { size } = this.$route.query;
      this.$router.push({ name: "index", query: { search: value, size } });
    },
    initCloud() {
      if (typeof window === "undefined") return;
      import("kuan-wordcloud").then(({ default: createCloud }) => {
        const data = this.tags.map(item => ({
          name: item.name,
          value: item.count,
          id: item.id
        }));
        const chart = createCloud(this.$refs.cloud, data);
        chart.on("click", ({ data }) => {
          console.log(data);
          this.$router.push({
            name: "index",
            query: { tagId: data.id }
          });
        });
      });
    }
  },
  mounted() {
    this.initCloud();
  }
};
</script>

<style lang="scss" scoped>
.page-aside {
  width: 300px;
  margin-left: 60px;
  color: #999;
  flex-shrink: 0;
  a {
    color: #999;
    &:hover {
      color: #333;
    }
  }
  .aside-item {
    padding: 20px 0;
    border-top: 1px solid #dfdfdf;
  }
  .cloud-container {
    height: 300px;
  }
}

.search-input {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  &::-webkit-input-placeholder {
    color: #999;
  }
  &:focus {
    outline: 0;
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
      0 0 8px rgba(102, 175, 233, 0.6);
  }
}
.title {
  color: gray;
  font-weight: 700;
  padding-bottom: 15px;
}
.tag-list {
  overflow: hidden;
  .tag {
    padding: 5px 8px;
    color: #999;
    border: 1px solid #ccc;
    border-radius: 2em;
    margin: 4px 8px;
    float: left;
    font-size: 14px;
    &:hover {
      border-color: #333;
    }
  }
}
.list-group {
  .list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;
    &:first-child {
      border-top-right-radius: 4px;
      border-top-left-radius: 4px;
    }
  }
}

@media (max-width: 768px) {
  .page-aside {
    width: 100%;
    margin: 0 auto;
  }
}
</style>
